<template>
  <div class="user-profile">
    <van-nav-bar 
      class="page-nav-bar"
      title="个人信息"
      left-arrow
      @click-left="$router.back()"
    >
    </van-nav-bar>
    <input 
      type="file" 
      hidden 
      ref="file"
      @change="onFileChang"
    >
    <!-- 个人信息 -->
    <van-cell title="头像" is-link @click="$refs.file.click()">
      <van-image
        class="avatar"
        fit="cover"
        round
        :src="user.photo"
      />
    </van-cell>
    <van-cell 
      title="昵称" 
      :value="user.name" 
      is-link 
      @click="isUpdateNemeShow=true"
    />
    <van-cell 
      title="性别" 
      :value="user.gender===0?'男':'女'" 
      is-link
      @click="isUpdateGenderShow=true"
    />
    <van-cell 
      title="生日" 
      :value="user.birthday" 
      is-link
      @click="isUpdateBirthdayShow=true"
    />


    <!-- 修改昵称的弹出层 -->
    <van-popup
      v-model="isUpdateNemeShow"
      style="height:100%"
      position="bottom"
    >
      <update-name
        v-if="isUpdateNemeShow"
        @close="isUpdateNemeShow=false"
        v-model="user.name"
      />
    </van-popup>

    <!-- 修改性别的弹出层 -->
    <van-popup
      v-model="isUpdateGenderShow"
      position="bottom"
    >
      <update-gender
        v-if="isUpdateGenderShow"
        @close="isUpdateGenderShow=false"
        v-model="user.gender"
      />
    </van-popup>

    <!-- 修改生日的弹出层 -->
    <van-popup
      v-model="isUpdateBirthdayShow"
      position="bottom"
    >
      <update-birthday
        v-if="isUpdateBirthdayShow"
        @close="isUpdateBirthdayShow=false"
        v-model="user.birthday"
      />
    </van-popup>

    <!-- 修改头像的弹出层 -->
    <van-popup
      v-model="isUpdatePhotoShow"
      position="bottom"
      style="height:100%"
    >
      <update-photo
        v-if="isUpdatePhotoShow"
        @close="isUpdatePhotoShow=false"
        @update-photo="user.photo=$event"
        :img="img"
      />
    </van-popup>

  </div>
</template>
<script>
import {grtUserProfileAPI} from '@/api';
import UpdateBirthday from './components/update-birthday.vue';
import UpdateGender from './components/update-gender.vue';
import UpdateName from './components/update-name.vue';
import UpdatePhoto from './components/update-photo.vue';

export default {
  name:"UserProfile",
  components:{
    UpdateBirthday,
    UpdateGender,
    UpdateName,
    UpdatePhoto
    },
  props:{},
  data(){
    return {
      user:{},
      isUpdateNemeShow:false,
      isUpdateGenderShow:false,
      isUpdateBirthdayShow:false,
      isUpdatePhotoShow:false,
      img:null  //预览的图片
    }
  },
  computed:{},
  watch:{},
  created(){
    this.grtUserProfile()
  },
  methods:{
    async grtUserProfile(){
      try{
        const {data}=await grtUserProfileAPI()
        this.user=data.data
        this.$toast.success('加载成功!')

      }catch(err){
        this.$toast.fail('加载失败!')
      }
    },

    onFileChang(){
      //获取文件对象
      const file=this.$refs.file.files[0]
      //基于文件对象获取blob数据
      this.img=window.URL.createObjectURL(file)
      this.isUpdatePhotoShow=true
      //file-input 如果选择了同一个文件  则不会触发change事件
      //解决方案:  每次完毕后把它的value清空
      this.$refs.file.value=''

    }
  }
}
</script>
<style lang="less" scoped>
.user-profile{
  .avatar{
    width:60px;
    height:60px;
  }
  .van-popup{
      background-color: #f5f7f9;
    }
}
</style>